<!DOCTYPE html>
<html>
<head>
  <title>SVG to PNG Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
    }
    h1 {
      color: #4285F4;
    }
    canvas {
      border: 1px solid #ccc;
      margin: 10px 0;
    }
    .icon-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    .icon-item {
      text-align: center;
    }
    button {
      background-color: #4285F4;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 4px;
      cursor: pointer;
      margin: 20px 0;
    }
    button:hover {
      background-color: #3367d6;
    }
  </style>
</head>
<body>
  <h1>SVG to PNG Icon Converter</h1>
  <p>This tool converts the SVG icon to the required PNG files for the Chrome extension.</p>
  
  <div class="icon-container">
    <div class="icon-item">
      <h3>Original SVG</h3>
      <img id="svgImage" src="images/icon.svg" width="128" height="128">
    </div>
    
    <div class="icon-item">
      <h3>16x16 PNG</h3>
      <canvas id="canvas16" width="16" height="16"></canvas>
      <div>
        <a id="download16" download="icon16.png">Download</a>
      </div>
    </div>
    
    <div class="icon-item">
      <h3>48x48 PNG</h3>
      <canvas id="canvas48" width="48" height="48"></canvas>
      <div>
        <a id="download48" download="icon48.png">Download</a>
      </div>
    </div>
    
    <div class="icon-item">
      <h3>128x128 PNG</h3>
      <canvas id="canvas128" width="128" height="128"></canvas>
      <div>
        <a id="download128" download="icon128.png">Download</a>
      </div>
    </div>
  </div>
  
  <button id="convertBtn">Convert and Download All</button>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const svgImage = document.getElementById('svgImage');
      const canvas16 = document.getElementById('canvas16');
      const canvas48 = document.getElementById('canvas48');
      const canvas128 = document.getElementById('canvas128');
      const download16 = document.getElementById('download16');
      const download48 = document.getElementById('download48');
      const download128 = document.getElementById('download128');
      const convertBtn = document.getElementById('convertBtn');
      
      // Convert SVG to PNG
      function convertSvgToPng(svg, canvas) {
        const ctx = canvas.getContext('2d');
        const img = new Image();
        
        img.onload = function() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          
          // Update download link
          const downloadLink = document.getElementById(`download${canvas.width}`);
          downloadLink.href = canvas.toDataURL('image/png');
        };
        
        // Load SVG
        img.src = svg.src;
      }
      
      // Convert and set up downloads
      function convertAndSetupDownloads() {
        convertSvgToPng(svgImage, canvas16);
        convertSvgToPng(svgImage, canvas48);
        convertSvgToPng(svgImage, canvas128);
      }
      
      // Initially convert
      svgImage.onload = convertAndSetupDownloads;
      
      // Convert button click
      convertBtn.addEventListener('click', function() {
        convertAndSetupDownloads();
        
        // Auto download
        setTimeout(() => {
          download16.click();
          setTimeout(() => {
            download48.click();
            setTimeout(() => {
              download128.click();
            }, 100);
          }, 100);
        }, 100);
      });
    });
  </script>
</body>
</html> 